<template>
	<view class="content">
		<!-- 可以保留你的Logo -->
		<!-- <image class="logo" src="/static/logo.png"></image> -->
		<view class="text-area">
			<text class="title">开发页面导航列表</text>
		</view>

		<!-- 页面导航列表容器 -->
		<view class="page-list">
			<!-- 使用 v-for 循环渲染 pageList 数组 -->
			<!-- :key 是必须的，可以提高渲染效率 -->
			<view class="page-item" v-for="page in pageList" :key="page.path" @click="goToPage(page.path)">
				<!-- 显示我们从路径中提取的文本 -->
				<text>{{ page.displayText }}</text>
			</view>
		</view>

	</view>
</template>

<script>
	// 1. 关键步骤：直接导入项目根目录下的 pages.json 文件
	import pagesJson from '@/pages.json';

	export default {
		data() {
			return {
				// 用于存储处理后的页面列表
				pageList: [],
				// 新增：用于存储所有 tabBar 页面的路径
				// 例如: ['pages/index/index', 'pages/user/user']
				tabBarPaths: [],
				content: "<p>\t恭喜您已成功报名韶关开放大学班级。请您于6月30日-7月1日回校缴费，并加入班级微信群。 </p><p>&nbsp;&nbsp;&nbsp;&nbsp;如有疑问请联系校方管理人员，电话：0751--8760290，地址： 韶关市武江区新兴路9号韶关开放大学综合楼一楼社区教育指导科（ 可地图导航韶关开放大学）。 </p><p class=\"ql-align-right\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;韶关开放大学 </p><p class=\"ql-align-right\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2025 年6月18日 </p><p><br></p>"
			}
		},
		onLoad() {
			// 页面加载时调用此方法来初始化列表
			this.initPageList();
		},
		methods: {
			/**
			 * 初始化页面列表
			 */
			initPageList() {
				// 获取 tabBar 页面路径 ---
				// 首先检查 pages.json 中是否存在 tabBar 配置
				if (pagesJson.tabBar && pagesJson.tabBar.list) {
					// 使用 map 提取出所有 tabBar 页面的 pagePath
					this.tabBarPaths = pagesJson.tabBar.list.map(item => item.pagePath);
				}

				const pages = pagesJson.pages;
				const currentPagePath = this.getRoutePath();

				const list = pages.map(page => {
					const path = page.path;
					const displayText = path.split('/').pop();

					return {
						path: path,
						displayText: displayText
					};
				}).filter(page => page.path !== currentPagePath);

				this.pageList = list.reverse();
			},

			/**
			 * 跳转到指定页面
			 * @param {string} path - 目标页面的路径
			 */
			goToPage(path) {
				// 判断目标路径是否存在于我们之前存储的 tabBarPaths 数组中
				if (this.tabBarPaths.includes(path)) {
					// 如果是，说明这是一个 tabBar 页面，必须使用 switchTab
					uni.switchTab({
						url: '/' + path
					});
				} else {
					// 如果不是，说明这是一个普通页面，使用 navigateTo
					uni.navigateTo({
						url: '/' + path,
						fail: (err) => {
							console.error(`跳转失败：${path}`, err);
							uni.showToast({
								title: `跳转失败: ${err.errMsg}`,
								icon: 'none'
							});
						}
					});
				}
			},

			/**
			 * 获取当前页面的路径（不含开头的'/'）
			 */
			getRoutePath() {
				const pages = getCurrentPages();
				if (pages.length > 0) {
					return pages[pages.length - 1].route;
				}
				return '';
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 100rpx;
		/* 调整了边距使其不至于太靠上 */
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
		margin-bottom: 40rpx;
		/* 与列表拉开距离 */
	}

	.title {
		font-size: 36rpx;
		color: #333;
		/* 颜色加深更清晰 */
		font-weight: bold;
	}

	/* 新增的列表样式 */
	.page-list {
		width: 100%;
		border-top: 1rpx solid #eee;
	}

	.page-item {
		width: 100%;
		padding: 28rpx 20rpx;
		border-bottom: 1rpx solid #eee;
		font-size: 32rpx;
		color: #007AFF;
		text-align: center;
		cursor: pointer;
		/* 在 H5 端显示为手型 */
	}

	/* 增加一个点击效果，提升用户体验 */
	.page-item:active {
		background-color: #f5f5f5;
	}

	.ql-align-right {
		text-align: right;
	}
</style>